<!-- 原题详情 -->
<template>
	<Modal v-model:visible="visible">
		<template #title>
			<div class="title">原题详情</div>
		</template>
		<template #content>
			<div class="lsh-content">
				<div class="lsh-top">
					<div class="lsh-top-left">
						<div
							class="lsh-desc-item"
							v-for="(item, index) in descList"
							:key="index"
						>
							{{ item }}
						</div>
					</div>
					<div class="lsh-top-right">
						<!-- 2014届山东省日照市高三3月第一次模拟考试理科数学试卷（带解析） -->
					</div>
				</div>
				<div class="lsh-bottom">
					<!-- <div
						v-html="nowQuestionInfo.parent?.context?.stem"
						v-if="nowQuestionInfo.parent"
					></div>
					<div
						v-html="nowQuestionInfo.now?.context?.stem"
						v-if="nowQuestionInfo.now"
					></div>
					<div class="lsh-answer">
						<span class="lsh-title">答案</span>
						<div
							class="answer-text"
							v-html="nowQuestionInfo?.now?.answer"
						></div>
					</div>
					<div class="lsh-analysis">
						<span class="lsh-title">解析</span>
						<div
							class="parse-text"
							v-html="nowQuestionInfo?.now?.analysis"
						></div>
					</div> -->
					<QuestionShow
						:ques-item="nowQuestionInfo || {}"
						:show-expand="false"
					/>
				</div>
			</div>
		</template>
	</Modal>
</template>

<script setup lang="ts">
import Modal from './modal.vue'
import { useMarkStore } from '@/store/modules/mark'
import { storeToRefs } from 'pinia'
import QuestionShow from '../question-show/index.vue'
const visible = defineModel('visible')
const { nowQuestionInfo } = storeToRefs(useMarkStore())
const descList = computed(() => {
	const info = nowQuestionInfo.value || {}
  console.log("questionInfo",info)
	return [
		info?.quesType?.name,
		`${info?.score ?? 0}分`,
		info.difficulty?.name,
		info.questionSource?.name,
		'人工批阅',
		`使用${info.useCount ?? 0}次`
	]
})
</script>
<style scoped lang="less">
.title {
	color: #0d1014;
	font-size: 15px;
	font-weight: 500;
}
.lsh-content {
	height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	.lsh-top {
		flex-shrink: 0;
		display: flex;
		padding: 8px 16px;
		align-items: center;
		gap: 16px;
		border-bottom: 1px solid #f2f5fa;
		background: #fff;
		height: 36px;
		overflow: hidden;
		.lsh-top-right {
			flex: 1;
			color: #99a1ad;
			text-overflow: ellipsis;
			overflow: hidden;
			text-wrap: nowrap;
			font-size: 12px;
			font-weight: 400;
		}
		.lsh-top-left {
			// flex: 1;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			color: #474f59;
			font-size: 14px;
			font-weight: 400;
			overflow: hidden;
			gap: 17px;
			// text-overflow: ellipsis;
			// overflow: hidden;
			text-wrap: nowrap;
			.lsh-desc-item {
				position: relative;
				&:nth-child(n + 2)::before {
					position: absolute;
					content: '';
					height: 8px;
					width: 1px;
					background: #e1e5eb;
					top: 50%;
					left: -8px;
					transform: translateY(-50%);
				}
			}
		}
	}
	.lsh-bottom {
		flex: 1;
		padding: 12px 16px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		.lsh-answer {
			.lsh-title {
				color: #26a555;
			}
		}
		.lsh-analysis {
			.lsh-title {
				color: #ffa126;
			}
		}
		:deep {
			.question-container .question-list .question-item .question-center {
				padding: 0;
				.question-parse {
					padding: 0;
					border: none;
					background: transparent;
					.answer-content,
					.parse-content {
						display: flex;
						flex-direction: column;
					}
				}
			}
		}
	}
}
</style>
